
import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTransfer , WeaSelect , WeaTop ,WeaInputSearch,WeaLocaleProvider} from 'ecCom';
import { Table , Button ,Icon ,Modal ,message} from 'antd';
import * as mobx from 'mobx';
import toString from 'lodash/toString';
import cloneDeep from 'lodash/cloneDeep';
const getLabel = WeaLocaleProvider.getLabel;

@inject('wfCusReportAddStore')

@observer
export default class TransferComs extends React.Component{
    constructor(props){
        super(props);
        this.state={
            leftTableType:'',
            leftFieldNameInput:'',
            rightTabletype:'',
            rightFieldNameInput:'',

            leftSortType:'',
            leftSortNameInput:'',
            rightSortType:'',
            rightSortNameInput:'',

            selectNum:'2',
            disableItems:[]
        }
        this.inital(this.props)
    }
    inital(props){
        const {wfCusReportAddStore,tags} = props;
        const { initDatasSteps,groupData} = wfCusReportAddStore;
        tags=="group"&&groupData.slice().length==0&&initDatasSteps({step:2});
        tags=="sort"&&initDatasSteps({step:4})
    }
    componentDidMount() {
        
    }

    render(){
        const {leftTableType = '',leftFieldNameInput = '',rightTabletype = '',rightFieldNameInput ='',
                leftSortType = '',leftSortNameInput = '',rightSortType = '',rightSortNameInput = ''} = this.state;
        const { wfCusReportAddStore , tags} =this.props;
        const {groupOptions,groupData,groupSelectedKeys,sortSelectedKeys,sortOptions,sortData} = wfCusReportAddStore;
        const {setGroupDatas,setSortDatas} = wfCusReportAddStore;
        return(
            <div className="wf-customer-report-add-transfer-coms">
                {tags=="group"?
                <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@qme1y4`} 
                    filterLeft={this.groupFilterLeft.bind(this)}
                    filterRight={this.groupFilterRight.bind(this)}
                    leftHeader={
                        <div className="transferHeader">
                            <span>{getLabel(83302,'待选')}</span>
                            <div className="transferHeader-select">
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@fdegga`}
                                        options={groupOptions}
                                        value={leftTableType}
                                        onChange={(v)=> this.setState({leftTableType:v})}/>
                                <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@21bogd`} 
                                    value={leftFieldNameInput} 
                                    onSearch={(v)=> this.setState({leftFieldNameInput:v})}
                                    onSearchChange={(v)=> this.setState({leftFieldNameInput:v})}/>
                            </div>
                        </div>
                        }
                    rightHeader={
                        <div className="transferHeader">
                            <span>{getLabel(83303,'已选')}</span>
                            <div className="transferHeader-select">
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@pmrfu5`}
                                    options={groupOptions}
                                    value={rightTabletype}
                                    onChange={(v)=> this.setState({rightTabletype:v})}/>
                                <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@tya78i`} 
                                    value={rightFieldNameInput} 
                                    onSearch={(v)=> this.setState({rightFieldNameInput:v})}
                                    onSearchChange={(v)=> this.setState({rightFieldNameInput:v})}/>
                            </div>
                        </div>
                       }
                    data={groupData.slice()}
                    renderItem={this.renderItem.bind(this)}
                    selectedKeys={mobx.toJS(groupSelectedKeys)}
                    leftCheckCB =  {this.leftCheckCB.bind(this)}
                    leftDoubleClickCB = {this.leftDoubleClickCB.bind(this)}
                    moveToRightCB = {this.moveToRightCB.bind(this)}
                    moveToLeftCB = {this.moveToLeftCB.bind(this)}
                    onChange={(keys, datas)=> setGroupDatas(keys)}
                    ref={"groupTransfer"}
                />:
                <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@q76r1x`} 
                    filterLeft={this.sortFilterLeft.bind(this)}
                    filterRight={this.sortFilterRight.bind(this)}
                    leftHeader={
                        <div className="transferHeader">
                            <span>{getLabel(83302,'待选')}</span>
                            <div className="transferHeader-select">
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6p1rss`}
                                    options={sortOptions.slice()}
                                    value={leftSortType}
                                    onChange={(v)=> this.setState({leftSortType:v})}/>
                                <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@5w32qu`} 
                                    value={leftSortNameInput} 
                                    onSearch={(v)=> this.setState({leftSortNameInput:v})}
                                    onSearchChange={(v)=> this.setState({leftSortNameInput:v})}/>
                            </div>
                        </div>
                        }
                    rightHeader={
                        <div className="transferHeader">
                            <span>{getLabel(83303,'已选')}</span>
                            <div className="transferHeader-select">
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@9ivo8z`}
                                    options={sortOptions.slice()}
                                    value={rightSortType}
                                    onChange={(v)=> this.setState({rightSortType:v})}/>
                                <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@73uk9c`} 
                                    value={rightSortNameInput} 
                                    onSearch={(v)=> this.setState({rightSortNameInput:v})}
                                    onSearchChange={(v)=> this.setState({rightSortNameInput:v})}/>
                            </div>
                        </div>
                        }
                    renderLeft={this.renderItem.bind(this)}
                    renderRight = {this.renderSortItem}
                    data={mobx.toJS(sortData)}
                    selectedKeys={mobx.toJS(sortSelectedKeys)}
                    onChange={(keys, datas)=> {
                        setSortDatas(keys,datas)
                    }}
                />
                }
        </div>
        )
    }
    //排序右侧
    renderSortItem=(item)=>{
        const { wfCusReportAddStore } = this.props;
        const {sortSelectedKeys,setSortSelectedDatasOrder} = wfCusReportAddStore;
        const options = [
            {
                key: "1",
                selected: true,
                showname:getLabel(384985,"升序") 
            },{
                key: "0",
                selected: false,
                showname: getLabel(384984,"降序") 
            }];
        return <div className="custom-render-item">
                    <div>
                        <p>{item.label}</p>
                        <p><span>{item.tabledesc}</span></p>
                    </div>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@ymdnaa`}
                        options={options}
                        value={item.sortNumber}
                        onChange={(v)=> {
                            setSortSelectedDatasOrder(item,v);
                        }}/>
                </div>
    }
    //穿梭框的渲染方式
    renderItem(item){
        const {disableItems = []} = this.state;
        const index  = disableItems.indexOf(item.id);
        let disabelClassName = index >= 0 ? 'custom-report-disable-item' : '';
        return <div className={`custom-render-item ${disabelClassName}`}>
                    <p>{item.label}</p>
                    <p><span>{item.tabledesc}</span></p>
                </div>
    }
    //统计分组穿梭框的过滤
    groupFilterLeft(items){
        const {leftTableType = '',leftFieldNameInput = ''} = this.state;
        if (leftTableType.trim() != "") {
            items = items.filter((item)=>item.tabletype == leftTableType)
        }
        if(leftFieldNameInput){
            items = items.filter((item)=>item.label.indexOf(leftFieldNameInput)!=-1 )
        }
        return items
    }
    groupFilterRight(items){
        const {rightTabletype = '',rightFieldNameInput =''} = this.state;
        if (rightTabletype.trim()!="") {
            items = items.filter((item)=>item.tabletype == rightTabletype)
        }
        if(rightFieldNameInput){
            items = items.filter((item)=>item.label.indexOf(rightFieldNameInput)!=-1 )
        }
        return items
    }
    //统计排序穿梭框的过滤
    sortFilterLeft(items){
        const {leftSortType = '',leftSortNameInput =''} = this.state;
        if (leftSortType.trim()!='') {
            items = items.filter((item)=>item.tabletype == leftSortType)
        }
        if(leftSortNameInput){
            items = items.filter((item)=>item.label.indexOf(leftSortNameInput)!=-1)
        }
        return items
    }
    sortFilterRight(items){
        const {rightSortType = '',rightSortNameInput =''} = this.state;
        if (rightSortType.trim()!='') {
            items = items.filter((item)=>item.tabletype == rightSortType)
        }
        if(rightSortNameInput){
            items = items.filter((item)=>item.label.indexOf(rightSortNameInput)!=-1)
        }
        return items
    }

    selectedDetailField(_groupData){
        let ids  = this.refs.groupTransfer.get();
        let detailTable = '';
        if(ids && ids.length > 0) {
            _groupData.map(o => {
                const index = ids.indexOf(toString(o.id));
                if (index >= 0) {
                    if (o.viewtype === 1) detailTable = o.tabletype;
                }
            });
        }
        return detailTable;
    }

    leftCheckCB(keys,e) {
        const {groupData} = this.props.wfCusReportAddStore;
        let _groupData = mobx.toJS(groupData);
        let detailTable  = this.selectedDetailField(_groupData);
        let _keys = [];
        _groupData.map(o=>{
            const index  = keys.indexOf(toString(o.id));
            if(index >= 0) {
                if(o.viewtype === 1 ) {
                    if(detailTable === '') detailTable = o.tabletype;
                    if(o.tabletype === detailTable) {
                        _keys.push(toString(o.id))
                    }
                } else {
                    _keys.push(toString(o.id));
                }
            }
        })
        this.calculateUpdateItems(detailTable,_groupData);
        return _keys;
    }

    leftDoubleClickCB(key){
        const {groupData} = this.props.wfCusReportAddStore;
        let _groupData = mobx.toJS(groupData);
        let detailTable  = this.selectedDetailField(_groupData);
        let _key = '';
        _groupData.map(o=>{
            if(toString(o.id) === key) {
                if(o.viewtype === 1) {
                    if(detailTable === '') detailTable = o.tabletype;
                    if(detailTable === o.tabletype ) {
                        _key = key;
                    }
                } else {
                    _key = key;
                }
            }
        })
        this.calculateUpdateItems(detailTable,_groupData);
        return _key;
    }

    moveToRightCB(rightData) {
        const {groupData} = this.props.wfCusReportAddStore;
        const {leftTableType = '',leftFieldNameInput = ''} = this.state;
        let _groupData = mobx.toJS(groupData);
        let detailTable  = this.selectedDetailField(_groupData);
        let selectidsarr = this.refs.groupTransfer.get();
        let _rightData = rightData.filter(o=>{
             let typebool =  true;
             let selectItem = selectidsarr.indexOf(toString(o.id)) > -1;
             if(leftTableType.trim()!='' && !selectItem) {
                 typebool = o.tabletype == leftTableType;
             }
             let namebool  = true;
             if(leftFieldNameInput.trim() !='' && !selectItem) {
                 namebool = o.label.indexOf(leftFieldNameInput) > -1;
             }
             if(typebool && namebool) {
                 if(o.viewtype === 1) {
                     if(detailTable === '') detailTable = o.tabletype;
                     return o.tabletype === detailTable;
                 } else {
                     return true;
                 }
             } else {
                return false;
             }
        })
        this.calculateUpdateItems(detailTable,_groupData);
        return _rightData;
    }
    
    calculateUpdateItems(detailTable,_groupData) {
        let disableItems = [];
        if(detailTable !== '') {
            _groupData.map(o=>{
                if(o.viewtype === 1) {
                    if(detailTable !== o.tabletype ) {
                        disableItems.push(toString(o.id));
                    }
                }
            })
        }
        this.setState({disableItems:disableItems});
    }

    moveToLeftCB(rightData){
        const {groupData} = this.props.wfCusReportAddStore;
        let _groupData = mobx.toJS(groupData);
        let detailTable = '';
        if(rightData && rightData.length > 0) {
            rightData.map(o=>{
                if(o.viewtype === 1) {
                    detailTable = o.tabletype;
                }
            })
        }
        this.calculateUpdateItems(detailTable,_groupData);
    }
}
